<template>
  <div class="container">
    <div class="order-list" v-if="!nodata">
      <!-- 订单循环位置 orders为订单数组 -->
      <div class="order-item" v-for="(item, index) in orders" :key="index">
        <div class="flex flex-between pad-t-21 pad-b-7 pad-l-15 pad-r-15 font-14">
          <div class="color-r v-align-c">
            <img v-if="fileSpace" :src="fileSpace + '/images/w-icon-dollar.png'" class="width-17 height-17 mar-r-4" alt="">
            <span>{{afterSaleType[item.afterSaleType]}}</span>
          </div>
        </div>
        <div class="pad-l-15 pad-r-15" @click="linkToDetail(item.afterSaleId)">
          <div class="goods-content pad-t-13.5 pad-b-13.5">
            <img class="radius-5 width-79 height-79" :src="item.goodsList[0].goodsImageUrl" alt="">
            <div class="flex-item mar-l-12.5 font-13 line-2">{{item.goodsList[0].goodsTitle}}</div>
          </div>
          <div>
            <!-- sku循环位置 -->
            <div class="flex flex-between height-51.5 pad-l-10 pad-r-15 sku-row">
              <div class="font-12 font-color-6">
                <div class="flex sku-detail" v-if="item.goodsList[0].skuDetail">
                  <div>规格：</div>
                  <div class="width-200 line-1">{{item.goodsList[0].skuDetail}}</div>
                </div>
                <div>￥{{item.goodsList[0].goodsPrice}}<span v-if="item.goodsList[0].unit">/{{item.goodsList[0].unit}}</span> </div>
              </div>
              <div>×{{item.goodsList[0].goodsNum}}</div>
            </div>
          </div>
          <div class="v-align-c height-51.5 pad-l-10 pad-r-15 sku-row font-12 font-w refund-status">
            <span class="mar-r-10" :class="{'color-status': refundStatus[item.afterSaleStatus]==='退款中' || refundStatus[item.afterSaleStatus]==='退款失败'}">{{refundStatus[item.afterSaleStatus]}}</span>
            <span class="line-1 flex-item" v-if="refundStatus[item.afterSaleStatus]==='退款中' || refundStatus[item.afterSaleStatus]==='退款成功'">￥{{item.refundAmount}}</span>
            <span class="line-1 flex-item" v-if="refundStatus[item.afterSaleStatus]==='退款失败'">{{item.rejectReason}}</span>
            <span class="line-1 flex-item" v-if="refundStatus[item.afterSaleStatus]==='退款关闭'">
              <span v-if="item.afterSaleStatus === -2">因您确认收货，本次申请关闭</span>
              <span v-if="item.afterSaleStatus === 4 || item.afterSaleStatus === -3">账期结束，退款关闭</span>
            </span>
          </div>
        </div>
        <div class="btnbar pad-t-15 pad-b-18 pad-l-15 pad-r-15">
          <div class="btnbar-default btn" @click="$pt.makePhoneCall({phoneNumber: item.enterprise.phone})">联系卖家</div>
          <div class="btnbar-pay btn" @click="linkToDetail(item.afterSaleId)">查看详情</div>
        </div>
      </div>
    </div>
    <div class="nodata" v-else>
      <img v-if="fileSpace" :src="fileSpace + '/images/w-icon-datanone-2.png'" class="width-118 height-102" alt="">
      <div class="title">暂无数据</div>
    </div>
  </div>
</template>
<script>
  import { refundPaging, updateOrderStatByMemberId } from '@/api/personal'

  export default {
    data() {
      return {
        refundStatus: {
          '0': '退款中',
          '1': '退款中',
          '2': '退款中',
          '3': '退款成功',
          '4': '退款关闭',
          '-1': '退款失败',
          '-2': '退款关闭',
          '-3': '退款关闭'
        },
        afterSaleType: {
          10: '退货退款',
          20: '仅退款',
          30: '仅退款'
        },
        orders: [],
        nodata: false,
        pullLoad: {
          loading: false,
          finished: false
        },
        params: {
          size: 10,
          currentPage: 1
        },
        statusBarHeight: 0
      }
    },
    onLoad() {
      // 初始化data
      Object.assign(this.$data, this.$options.data())
      this.statusBarHeight = this.$pt.getSystemInfoSync()['statusBarHeight']
    },
    mounted() {
      this.params.currentPage = 1
      this.orders = []
      this.refundPaging()
    },
    onPullDownRefresh() {
      this.params.currentPage = 1
      this.orders = []
      this.refundPaging()
      setTimeout(() => {
        this.$pt.stopPullDownRefresh()
      }, 500)
    },
    onReachBottom() {
      // 触底刷新
      if (!this.pullLoad.finished) {
        this.refundPaging()
      }
    },
    methods: {
      tabClick(e) {
        // tab点击事件
        this.params.currentPage = 1
        this.activeIndex = e.mp.detail.index
        this.pullLoad.finished = false
        this.orders = []
        this.refundPaging()
      },
      refundPaging() {
        const params = {
          enterpriseId: this.getEnterpriseId,
          memberId: this.getShowBuyCard ? this.getCustomerId : this.getMemberId,
          customerId: this.getCustomerId,
          currentPage: this.params.currentPage,
          size: 10
        }
        this.nodata = false
        this.$pt.showLoading()
        refundPaging(params).then(response => {
          this.$pt.hideLoading()
          if (response.isError) return
          response.data.records.forEach(order => {
            this.orders.push(order)
          })
          if (this.orders.length === 0) {
            this.nodata = true
          }
          this.params.currentPage++
          if (this.orders.length === 0 || this.orders.length >= response.data.total) {
            this.pullLoad.finished = true
          }
        })
        updateOrderStatByMemberId({
          memberId: this.getShowBuyCard ? this.getCustomerId : this.getMemberId,
          memberType: 2,
          orderType: 2,
          orderStatus: ''
        }).then(response => {
        })
      },
      linkToDetail(afterSaleId) {
        // 跳转至退款详情页
        this.$pt.navigateTo({url: `/pages/personal/order/refund-detail/main?afterSaleId=${afterSaleId}`})
      }
    }
  }
</script>
<style lang="less" scoped>
.nav-bar{
  height: 44px;
  background: white;
  display: flex;
  align-items: center;
  .search-bar{
    height: 35px;
    width: 228px;
    border-radius: 17.5px;
    line-height: 35px;
    padding-left: 15px;
    box-sizing: border-box;
    color: #999999;
    background: #EEEEEE;
  }
}
.order-item{
  background: white;
  margin-top: 10px;
  &:first-child{
    margin-top: unset;
  }
}
.goods-content{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  .line-2{
    max-height: 34px;
    height: unset;
  }
}
.border-b{
  border-bottom: 1px solid #E9E9E9;
}
.color-r{
  color: #FF4E23;
}
.color-status{
  color: #FF5A00;
}
.sku-row{
  border-radius: 4px;
  background: #F8F8F8;
  margin-top: 7px;
  &:first-child{
    margin-top: 0;
  }
  .sku-detail{
    .line-1{
      line-height: unset;
    }
  }
}
.refund-status{
  line-height: 1.3;
  .line-1{
    height: unset;
  }
}
.btnbar{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  .btn{
    font-size: 13px;
    border-radius: 13.5px;
    margin-left: 9px;
    width: 87px;
    height: 25px;
    line-height: 25px;
    text-align: center;
  }
  &-default{
    background: white;
    color: #999999;
    border: 1px solid #B6B6B6;
  }
  &-pay{
    width: 89px !important;
    height: 27px !important;
    line-height: 27px !important;
    background: linear-gradient(to right, #FF9048, #FF4E23);
    color: white;
  }
}
.radius-5{
  border-radius: 5px;
}
.nodata{
  padding-top: 130px;
  img{
    margin: 0 auto;
  }
  .title{
    margin-top: 35px;
    text-align: center;
    font-size: 18px;
  }
}
// 修改vant tabs样式
.order-tabs{
  /deep/ .van-tabs--line{
    .van-tabs__wrap{
      height: 40px;
    }
  }
  /deep/ .van-tab {
    line-height: 40px;
  }
}
</style>
